<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Profile Cards</title>
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
         <link rel="stylesheet" href="tips_style.css">
    </head>
    <body>
        <div class="header">
            <div class="nav">
                <div class="nav_child">
                    <div class = "logo">
                        <a href="http://pubg.qq.com/main.shtml" target="_blank"><img src="images/logo.png"></a>
                    </div>
                    <div class = "navbar">
                        <a href="homepage.html" target="_blank">Homepage</a>
                        <a href="chat.html" target="_blank">Chat</a>
                        <a href="https://www.library.unsw.edu.au/" target="_blank">Library</a>
                        <a href="tips.html" target="_blank">Study Tips</a>
                        <a href="http://my.unsw.edu.au" class="header">myUNSW</a>
                    </div>
                </div>
            </div>
            <div class="banner">
            </div>
        </div>
       <section>
           <div class="container">
               <h1 class="heading">Study Tips</h1>
               <div class="card-wrapper">
                   <div class="card">
                       <img src="images/cards.jpeg" alt="card background" class="card-img">
                       <img src="images/img1.jpg" alt="profile image" class="profile-img">
                       <h1>Nobita Nobi</h1>
                       <p class="job-title">Physics Professor</p>
                       <p class="learning resources">
                           1.open stack physics testbook
                           2.Don't ask me about relativity
                       </p>
                       <a href='chat.html' class="btn">Contact</a>
                       <ul class="social-media">
                           <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
                           <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
                           <li><a href="#"><i class="fab fa-google-plus-square"></i></a></li>
                       </ul>

                   </div>
               </div>
               <div class="card-wrapper">
                <div class="card">
                    <img src="images/cards.jpeg" alt="card background" class="card-img">
                    <img src="images/img2.jpg" alt="profile image" class="profile-img">
                    <h1>Dorami</h1>
                    <p class="job-title">Chemistry Professor</p>
                    <p class="learning resources">
                        1.Reward Yourself
                        2.Use a smart app
                        3.Stay pretty
                    </p>
                    <a href='chat.html' class="btn">Contact</a>
                    <ul class="social-media">
                        <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-square"></i></a></li>
                    </ul>

                </div>
            </div>
            <div class="card-wrapper">
                <div class="card">
                    <img src="images/cards.jpeg" alt="card background" class="card-img">
                    <img src="images/img3.jpg" alt="profile image" class="profile-img">
                    <h1>Takeshi Goda</h1>
                    <p class="job-title">Maths Professor</p>
                    <p class="learning resources">
                        1.Check your surroundings
                        2.Stop the all nighters
                        3.Eat
                    </p>
                    <a href='chat.html' class="btn">Contact</a>
                    <ul class="social-media">
                        <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-square"></i></a></li>
                    </ul>

                </div>
            </div>
           </div>
       </section>
    </body>
</html>
